<template>
    <div class="screen-container">
        <div class="screen-content" ref="screenRef">
            <div v-if="loading" class="mask flex-c">
                <dv-loading>
                    <span class="loading-title">加载中...</span>
                </dv-loading>
            </div>
            <div class="header-section">
                <ScreenHeader></ScreenHeader>
            </div>
            <div class="screen-chart-section1">
                <dv-border-box-8  class="dv-box-h3" :style="borderBoxStyle1" :dur="10">
                    <ScreenTopCenter></ScreenTopCenter>
                </dv-border-box-8>
                <dv-border-box-12 class="dv-box-h1" :style="borderBoxStyle2">
                    <ScreenTopLeft1></ScreenTopLeft1>
                </dv-border-box-12>
                <dv-border-box-12 class="dv-box-h2" :style="borderBoxStyle3">
                    <ScreenTopLeft2></ScreenTopLeft2>
                </dv-border-box-12>
                <dv-border-box-12  class="dv-box-h4" :style="borderBoxStyle4">
                    <ScreenTopRight1></ScreenTopRight1>
                </dv-border-box-12>
                <dv-border-box-12  class="dv-box-h5" :style="borderBoxStyle5">
                    <ScreenTopRight2></ScreenTopRight2>
                </dv-border-box-12>
            </div>
            <div class="screen-chart-section2">
                <dv-border-box-12 class="dv-box-h6" :style="borderBoxStyle6">
                    <ScreenBottomLeft></ScreenBottomLeft>
                </dv-border-box-12>
                <dv-border-box-12 class="dv-box-h7" :style="borderBoxStyle7">
                    <ScreenBottomRight></ScreenBottomRight>
                </dv-border-box-12>
            </div>
            <div class="footer-section">
                <ScreenFooter></ScreenFooter>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref, computed } from 'vue';
import ScreenHeader from '@/pages/screen-header/ScreenHeader.vue';
import ScreenFooter from '@/pages/screen-footer/ScreenFooter.vue';
import ScreenTopLeft1 from '@/pages/screen-top-left1/ScreenTopLeft1.vue';
import ScreenTopLeft2 from '@/pages/screen-top-left2/ScreenTopLeft2.vue';
import ScreenTopCenter from '@/pages/screen-top-center/ScreenTopCenter.vue';
import ScreenTopRight1 from '@/pages/screen-top-right1/ScreenTopRight1.vue';
import ScreenTopRight2 from '@/pages/screen-top-right2/ScreenTopRight2.vue';
import ScreenBottomLeft from '@/pages/screen-bottom-left/ScreenBottomLeft.vue';
import ScreenBottomRight from '@/pages/screen-bottom-right/ScreenBottomRight.vue';
import { calcDynamicHeight, pxToNum, calcBorderHeight } from '@/utils/util';
import variables from '@/assets/scss/common/variables.module.scss';

const borderBoxStyle1 = computed(() => {
  return {
    'height': (pxToNum(calcDynamicHeight(pxToNum(variables.height3))) + pxToNum(variables.borderHeight)) + 'px'
  }
})
const borderBoxStyle2 = computed(() => {
  return {
    'height': (pxToNum(calcDynamicHeight(pxToNum(variables.height1))) + pxToNum(variables.borderHeight)) + 'px'
  }
})
const borderBoxStyle3 = computed(() => {
  return {
    'height': (pxToNum(calcDynamicHeight(pxToNum(variables.height2))) + pxToNum(variables.borderHeight)) + 'px'
  }
})
const borderBoxStyle4 = computed(() => {
  return {
    'height': (pxToNum(calcDynamicHeight(pxToNum(variables.height4))) + pxToNum(variables.borderHeight)) + 'px'
  }
})
const borderBoxStyle5 = computed(() => {
  return {
    'height': (pxToNum(calcDynamicHeight(pxToNum(variables.height5))) + pxToNum(variables.borderHeight)) + 'px'
  }
})
const borderBoxStyle6 = computed(() => {
  return {
    'height': (pxToNum(calcDynamicHeight(pxToNum(variables.height6))) + pxToNum(variables.borderHeight)) + 'px'
  }
})
const borderBoxStyle7 = computed(() => {
  return {
    'height': (pxToNum(calcDynamicHeight(pxToNum(variables.height7))) + pxToNum(variables.borderHeight)) + 'px'
  }
})
// 加载动画
const loading = ref(true);

onMounted(() => {
    setTimeout(() => {
        loading.value = false;
    }, 2000);
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/common/variables.module.scss';

.screen-container {
    width: 100vw;
    background-color: $theme-color;

    .mask {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: $theme-color;
        z-index: 9999;
    }
    .screen-content {
        width: 100%;
        // height: 1080px;
        box-sizing: border-box;
        padding: 12px;

        .loading-title {
            font-size: $base-font-size;
            color: #fff;
            margin-top: 10px;
        }

        .screen-chart-section1 {
            margin-top: 10px;
        }

        .screen-chart-section2 {
            margin-top: 10px;
        }
        .dv-border-box-8 {
            padding: 10px 5px;
        }

        .dv-border-box-12 {
            margin-top: 5px;
            padding: 10px;
        }

        .dv-box-h1 {
            height: $box-height1 + $box-border-height;
        }

        .dv-box-h2 {
            height: $box-height2 + $box-border-height;
        }

        .dv-box-h3 {
            height: $box-height3 + $box-border-height;
        }

        .dv-box-h4 {
            height: $box-height4 + $box-border-height;
        }

        .dv-box-h5 {
            height: $box-height5 + $box-border-height;
        }

        .dv-box-h6 {
            height: $box-height6 + $box-border-height;
        }

        .dv-box-h7 {
            height: $box-height7 + 20px;
        }
    }
}
</style>